{"componentChunkName":"component---src-templates-post-js","path":"/simply-learn-full-stack-4","result":{"data":{"site":{"siteMetadata":{"title":"neohed","description":"Blog posts on web development and related areas","author":{"name":"neohed"},"keywords":["Web Development","JavaScript"]}},"mdx":{"frontmatter":{"title":"Full-Stack React & Node.js, Part 4 - Get data from server","description":"Tutorial to learn full-stack with React node.js and Prisma DB","date":"June 27, 2022","author":null,"banner":null,"slug":"simply-learn-full-stack-4","keywords":null},"body":"function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsx mdx */\nvar _frontmatter = {\n  \"slug\": \"simply-learn-full-stack-4\",\n  \"date\": \"2022-06-27T08:36:32\",\n  \"title\": \"Full-Stack React & Node.js, Part 4 - Get data from server\",\n  \"description\": \"Tutorial to learn full-stack with React node.js and Prisma DB\",\n  \"published\": true\n};\n\nvar makeShortcode = function makeShortcode(name) {\n  return function MDXDefaultShortcode(props) {\n    console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n    return mdx(\"div\", props);\n  };\n};\n\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, [\"components\"]);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"h1\", null, \"Simply Learn Full-Stack React & Node.js\"), mdx(\"p\", null, \"Inside folder \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"node-server\"), \", create a new folder called \\\"controllers.\\\"  Inside add a file called \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"note.controller.js\"), \" and add the following code:\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"const note = {\\n    id: 1,\\n    title: 'A Note',\\n    content: 'Lorem ipsum dolor sit amet',\\n    author: 'neohed',\\n    lang: 'en',\\n    isLive: true,\\n    category: '',\\n}\\n\\nasync function getNote(req, res) {\\n    res.json({ note });\\n}\\n\\nmodule.exports = {\\n    getNote\\n}\\n\")), mdx(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, \"Why \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \".controller.js\"), \"? In a complex app, you will have many entities and associated route, controller, middleware and data files.  Tagging each file with \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \".controller\"), \", \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \".route\"), \", \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \".middleware\"), \", \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \".data\"), \", etc., makes it much less confusing when you have many files open in your editor.\")), mdx(\"p\", null, \"Next, inside folder \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"node-server\"), \", create another folder called \\\"routes.\\\"  Inside add a file called \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"index.js\"), \" and add the following code:\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"const express = require('express');\\nconst noteRouter = express.Router();\\nconst noteController = require('../controllers/note.controller');\\n\\nnoteRouter.get('', noteController.getNote);\\n\\nconst routes = app => {\\n  app.use('/note', noteRouter);\\n};\\n\\nmodule.exports = routes;\\n\")), mdx(\"p\", null, \"Finally, change \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"app.js\"), \" to this:\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"const express = require('express');\\nconst cors = require('cors');\\nconst morganLogger = require('morgan');\\nconst bodyParser = require('body-parser');\\nconst initRoutes = require('./routes/index');\\n\\nconst env = process.env.NODE_ENV || 'development';\\nconst app = express();\\n\\nif (env === 'development') {\\n  app.use(cors());\\n}\\n\\napp.use(morganLogger('dev'));\\napp.use(bodyParser.json());\\napp.use(bodyParser.urlencoded({extended: true}));\\n\\ninitRoutes(app);\\n\\napp.use(function (req, res, next) {\\n  const error = 'Here be dragons. Route not found';\\n  console.info(`404 error! ${error}`)\\n  res.status(404).send(error);\\n});\\n\\nconst port = 4011;\\n\\napp.listen({port}, async () => {\\n  const baseUrl = `http://localhost:${port}`;\\n\\n  console.log(`Server running at: \\\\t @ ${baseUrl}/`);\\n});\\n\")), mdx(\"p\", null, \"Now run your Node.js server with this command:\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-shell\"\n  }), \"npm run start\\n\")), mdx(\"p\", null, \"When the console outputs a message saying the server is running, paste this URL into a browser: \\\"\", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"http://localhost:4011/note\"\n  }), \"http://localhost:4011/note\"), \"\\\" and you should see the following object displayed:\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-json\"\n  }), \"{\\n  note: {\\n    id: 1,\\n    title: \\\"A Note\\\",\\n    content: \\\"Lorem ipsum dolor sit amet\\\",\\n    author: \\\"neohed\\\",\\n    lang: \\\"en\\\",\\n    isLive: true,\\n    category: \\\"\\\"\\n  }\\n}\\n\")), mdx(\"p\", null, \"You now have a working client and server. \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/simply-learn-full-stack-5\"\n  }), \"Next we will finally get the client and server to communicate\"), \", ...\"), mdx(\"p\", null, \"Code repo: \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://github.com/neohed/node-react-stack\"\n  }), \"Github Repository\")));\n}\n;\nMDXContent.isMDXComponent = true;"}},"pageContext":{"id":"2dec4ce8-7bf3-555d-80f7-a06fd8cce40b","prev":{"id":"f627dbc6-3dce-5cac-bd70-07cbe3b26c04","parent":{"name":"index","sourceInstanceName":"blog"},"excerpt":"Simply Learn Full-Stack React & Node.js Create the React web-site Create a folder somewhere for your project. This will hold the client and server code.  I called mine:  node-react-stack  and will be using that folder name throughout. Inside the…","fields":{"title":"Simply Learn Full-Stack Web, Part 1","description":"Tutorial to learn full-stack with React node.js and Prisma DB","slug":"simply-learn-full-stack-1","absolutePath":"D:/Workspace/Github/neohed-blog/content/blog/learn-full-stack-simply-01/index.mdx","banner":null,"date":"2022-06-27T08:36:32"}},"next":{"id":"2390e060-6276-55f3-89cf-91f581fdf491","parent":{"name":"index","sourceInstanceName":"blog"},"excerpt":"Simply Learn Full-Stack React & Node.js First create a folder  node-server  at the same level as folder  react-client Inside the  node-server  folder, use a shell/CLI to enter this command to create a  package.json  file: The  -y  flag means that…","fields":{"title":"Simply Learn Full-Stack Web, Part 3","description":"Tutorial to learn full-stack with React node.js and Prisma DB","slug":"simply-learn-full-stack-3","absolutePath":"D:/Workspace/Github/neohed-blog/content/blog/learn-full-stack-simply-03/index.mdx","banner":null,"date":"2022-06-27T08:36:32"}}}}}